<template>
  <div class="box-detail">
    <van-swipe :autoplay="2000">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img :src="item.src" alt />
      </van-swipe-item>
    </van-swipe>
    <div class="goodParams-a">
      <span class="goodInfo">{{canshu.title}}</span>
      <van-card :price="'销售价'+canshu.sell_price" :origin-price="'市场价'+ canshu.market_price" />
      <div class="stepper">
        <span calss="goumai">购买数量</span>
        <van-stepper class="bujinqi" v-model="value" min="1" />
      </div>
      <van-button type="info" size="small">立即购买</van-button>
      <van-button type="primary" size="small" @click="jiaru">加入购物车</van-button>
    </div>
    <div class="goodParams">
      <span class="goodInfo-b">商品参数</span>
      <div class="goodParams-node">
        <p>商品货号:{{canshu.goods_no}}</p>
        <p>库存情况:{{canshu.stock_quantity}}</p>
        <p>上架时间:{{canshu.add_time | clipDate(0,10)}}</p>
      </div>
      <button class="anliu1" @cklik="buttonId">图文介绍</button>
      <button class="anliu2" @cklik="buttonplun">商品评论</button>
    </div>
    <van-tabbar>
      <van-tabbar-item icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o" :info="cartItemCount">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from "axios";
import { mapState, mapMutations, mapGetters } from "vuex";
// import Mock from "mockjs";

export default {
  data() {
    return {
      images: [],
      canshu: {
        add_time: "",
        goods_no: "",
        id: 0,
        market_price: 0,
        sell_price: 0,
        stock_quantity: 0,
        title: ""
      },
      value: 0,
      gouwuche: 0,
      imgList: []
    };
  },
  computed: {
    ...mapState(["list"]),
    ...mapGetters(["cartItemCount"])
  },
  created() {
    this.getCateList();
  },
  methods: {
    ...mapMutations(["addCartItem"]),
    getCateList() {
      const goodId = this.$router.history.current.query.goodId;
      axios.get("api/getthumimages/" + goodId).then(data => {
        this.images = data.data.message;
        console.log(data);
        console.log(this.images);
      });
      axios.get("/api/goods/getinfo/" + goodId).then(data => {
        this.canshu = data.data.message[0];
      });
    },
    async jiaru() {
      this.gouwuche = this.gouwuche + this.value;
      const newCartItem = {
        id: this.canshu.id,
        count: this.value,
        price: new Number(this.canshu.sell_price).toFixed(2),
        title: this.canshu.title,
        cover: this.images[0].src
      };
      setTimeout(() => {
        this.addCartItem(newCartItem);
        this.$toast.success("添加成功");
      }, 500);
    },
    buttonId() {
      this.$router.push("/goodsdesc/87");
    },
    buttonplun() {}
  }
};
</script>

<style lang="less" scoped>
.box-detail {
  padding: 8px;
}

.van-swipe {
  height: 50vw;
  margin-top: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
  height: 230px;
  border-radius: 3px;
  padding: 20px 0;
}

.van-swipe img {
  height: 100%;
  display: block;
  margin: auto;
}
.goodParams,
.goodParams-a {
  margin-top: 10px;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}
.goodParams {
  margin-bottom: 60px;
}
.goodParams-node {
  margin-top: 5px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.van-card__content {
  min-height: 0px;
  background-color: #fff;
}
.van-card {
  padding: 0;
}
.van-card__price-integer {
  font-size: 14px;
  color: #969799;
}
.van-card__price {
  color: #969799;
}
.van-button--small {
  min-width: 90px;
  margin-right: 10px;
}
.goodInfo {
  border-bottom: 1px solid #ccc;
}
.bujinqi {
  margin: 10px 0 10px 0;
}
p {
  color: #8f8f94;
  font-size: 14px;
  margin: 10px 0;
}
.anliu1,
.anliu2 {
  width: 100%;
  height: 40px;
  background-color: #fff;
  border: 0;
  border: 1px solid blue;
  border-radius: 5px;
  margin-top: 10px;
  color: blue;
}
.anliu2 {
  border-color: red;
  color: red;
}
.bujinqi {
  width: 50%;
  margin-right: 60px;
}
.van-nav-bar__text,
.van-icon-arrow-left:before {
  color: #ffffff;
}
.van-ellipsis {
  color: #ffffff;
}
.th {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
.van-nav-bar {
  background-color: #1989fa;
}
.van-card__price-integer,
.van-card__price-currency {
  font-weight: 700;
  font-size: 15px;
  color: red;
}
.van-card__origin-price {
  font-size: 14px;
}

.stepper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>